<template>
  <div class="shoplist">
    <h4>猜你喜欢</h4>
    <!-- 排序 -->
    <div class="stor">
      <span
        v-for="(item, index) in storArr"
        :key="index"
        @click="sort(index)"
        >{{ item }}</span
      >
    </div>
    <!-- 店铺列表 -->
    <div
      class="list"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item)"
    >
      <img :src="item.picUrl" alt="" />
      <!-- 右侧 -->
      <div class="right">
        <div class="name">{{ item.name }}</div>
        <div class="score">
          ★{{ item.wmPoiScore / 10 }} {{ item.monthSalesTip }}
        </div>
        <!-- 配送 -->
        <div class="infm">
          <div class="infm_l">
            {{ item.minPriceTip }} {{ item.shippingFeeTip }}
          </div>
          <div class="infm_r">
            {{ item.deliveryTimeTip }}{{ item.distance }}
          </div>
        </div>
        <!--优惠券 -->
        <div class="quan">
          <span v-for="(items, index) in item.discounts2" :key="index">
            {{ items.info }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { shop_list } from "../../utils/api";
export default {
  data() {
    return {
      list: [],
      storArr: ["综合排序", "最近距离", "销量最高", "筛选"],
    };
  },
  methods: {
    toDetail(item) {
      // 路由跳转同时传参
      this.$router.push("/detail/" + item.mtWmPoiId);
    },
    sort(index) {
      if (index == 0) {
        this.list.sort((a, b) => {
          return a.wmPoiScore - b.wmPoiScore;
        });
      }
      if (index == 1) {
        this.list.sort((a, b) => {
          return (
            a.distance.slice(0, a.distance.length - 2) / 1 -
            b.distance.slice(0, b.distance.length - 2) / 1
          );
        });
      }
      if (index == 2) {
        this.list.sort((a, b) => {
          return (
            b.monthSalesTip.slice(2, b.monthSalesTip.length - 2) / 1 -
            a.monthSalesTip.slice(2, a.monthSalesTip.length - 2) / 1
          );
        });
      }
    },
  },
  mounted() {
    shop_list().then((res) => {
      this.list = res.data.list;
    });
  },
};
</script>
  
  <style lang="scss" scoped>
.shoplist {
  margin: 5px;
  .stor {
    margin-top: 10px;
    span {
      padding: 3px;
      margin: 1px 5px;
      border-radius: 5px;
      background-color: #eee;
      font-size: 14px;
    }
  }
  .list {
    margin-top: 15px;
    display: flex;
    img {
      width: 80px;
      height: 80px;
      border-radius: 3px;
      margin: 5px;
      border: 1px solid #eee;
    }
    .right {
      font-size: 12px;
      flex: 1;
      margin: 5px;
      div {
        line-height: 20px;
      }
      .name {
        font-size: 16px;
        font-weight: bold;
        line-height: 20px;
      }
      .score {
        color: coral;
        margin: 0 5px;
      }
      .infm {
        display: flex;
        justify-content: space-between;
      }
      .quan {
        span {
          border: 1px solid #d61e05;
          padding: 1px 5px;
          line-height: 14px;
          border-radius: 3px;
          color: #d61e05;
          display: inline-block;
          margin: 3px;
        }
      }
    }
  }
}
</style>